<template>
  <Card class="!m-10px">
    <Button
      type="primary"
      class="!mb-20px"
      :disabled="!categoryStore.category3Id"
      @click="showAddSpu"
    >
      <template #icon><PlusOutlined /></template>
      添加SPU
    </Button>

    <Table
      :columns="columns"
      :dataSource="spuList"
      bordered
      :pagination="{
        // 当前页码
        current,
        // 每页条数
        pageSize,
        // 总数
        total,
        // 每页条数的可选项
        pageSizeOptions: ['3', '6', '9', '12'],
        // 显示快速跳转页码
        showQuickJumper: true,
        // 显示修改每页条数
        showSizeChanger: true,
        // 显示总数
        showTotal: (total) => `总共 ${total} 条`,
        onChange: getSpuList,
        onShowSizeChange: getSpuList,
      }"
      :loading="loading"
    >
      <template #bodyCell="{ index, column, record }">
        <template v-if="column.dataIndex === 'index'">{{ index + 1 }}</template>
        <template v-if="column.dataIndex === 'operator'">
          <Button type="primary" class="!mr-10px" @click="showAddSku(record)">
            <template #icon><PlusOutlined /></template>
          </Button>
          <Button type="primary" class="!mr-10px" @click="showUpdateSpu(record)">
            <template #icon><EditOutlined /></template>
          </Button>
          <Button type="primary" class="!mr-10px" @click="showSkuList(record)">
            <template #icon><InfoOutlined /></template>
          </Button>
          <Button type="primary">
            <template #icon><DeleteOutlined /></template>
          </Button>
        </template>
      </template>
    </Table>

    <Modal v-model:visible="visible" :title="`${currentSpu.spuName}的SKU列表`" :footer="null">
      <Table
        :columns="skuColumns"
        :dataSource="skuList"
        bordered
        :pagination="false"
        :scroll="{ x: 800, y: 300 }"
      >
        <template #bodyCell="{ index, column }">
          <template v-if="column.dataIndex === 'index'">
            {{ index + 1 }}
          </template>
        </template>
      </Table>
    </Modal>
  </Card>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';

  export default defineComponent({
    name: 'SpuList',
  });
</script>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { Card, Button, Table, message, Modal } from 'ant-design-vue';
  import { PlusOutlined, EditOutlined, InfoOutlined, DeleteOutlined } from '@ant-design/icons-vue';
  import { useCategoryStore } from '/@/store/modules/category';
  import { getSpuListApi } from '/@/api/product/spu';
  import { findSkuListBySpuIdApi } from '/@/api/product/sku';
  import { SpuListModel, SpuModel } from '/@/api/product/model/spuModel';
  import { SkuListModel } from '/@/api/product/model/skuModel';
  import { CompNames } from '../types';

  const emits = defineEmits(['setIsShow', 'setCurrentSpu']);

  const categoryStore = useCategoryStore();

  const columns = [
    {
      title: '序号',
      className: 'w-70px !text-center',
      dataIndex: 'index',
    },
    {
      title: 'Spu名称',
      dataIndex: 'spuName',
    },
    {
      title: 'Spu描述',
      dataIndex: 'description',
    },
    {
      title: '操作',
      className: 'w-200px',
      dataIndex: 'operator',
    },
  ];

  const skuColumns = [
    {
      title: '序号',
      className: '!text-center',
      dataIndex: 'index',
      fixed: 'left',
      width: 70,
    },
    {
      title: 'Sku名称',
      dataIndex: 'skuName',
      width: 250,
    },
    {
      title: 'Sku描述',
      dataIndex: 'skuDesc',
      width: 250,
    },
    {
      title: 'Sku价格',
      dataIndex: 'price',
      width: 150,
    },
    {
      title: 'Sku重量',
      dataIndex: 'weight',
      width: 150,
    },
  ];

  const skuList = ref<SkuListModel>([]);

  const spuList = ref<SpuListModel>([]);
  const current = ref<number>(1);
  const pageSize = ref<number>(3);
  const total = ref<number>(0);
  const loading = ref<boolean>(false);

  const visible = ref<boolean>(false);
  // Partial将SpuModel类型都变成可选的
  const currentSpu = ref<Partial<SpuModel>>({});
  const showSkuList = async (spu: SpuModel) => {
    currentSpu.value = spu;
    visible.value = true;
    skuList.value = await findSkuListBySpuIdApi(spu.id as number);
  };

  const getSpuList = async (page: number, limit: number) => {
    loading.value = true;
    const res = await getSpuListApi({
      page,
      limit,
      category3Id: categoryStore.getCategory3Id as number,
    });
    spuList.value = res.records;
    total.value = res.total;
    current.value = page;
    pageSize.value = limit;
    message.success('获取spu列表成功');
    loading.value = false;
  };

  watch(
    () => categoryStore.category3Id,
    (category3Id) => {
      if (!category3Id) {
        spuList.value = [];
        current.value = 1;
        pageSize.value = 3;
        total.value = 0;
        return;
      }

      getSpuList(current.value, pageSize.value);
    },
    { immediate: true },
  );

  const showAddSpu = () => {
    emits('setIsShow', CompNames.ADD_SPU);
    emits('setCurrentSpu');
  };
  const showUpdateSpu = (spu: SpuModel) => {
    emits('setIsShow', CompNames.ADD_SPU);
    emits('setCurrentSpu', {
      ...spu,
      spuImageList: [],
      spuSaleAttrList: [],
    });
  };
  const showAddSku = (spu: SpuModel) => {
    emits('setIsShow', CompNames.ADD_SKU);
    emits('setCurrentSpu', {
      ...spu,
      spuImageList: [],
      spuSaleAttrList: [],
    });
  };
</script>
